<template>
  <div id="app" class="min-h-screen">
    <!-- 已认证状态显示完整布局 -->
    <template v-if="isAuthenticated">
      <div class="flex">
        <Sidebar />
        <div class="flex-1 flex flex-col">
          <Header />
          <main class="p-6 flex-1 overflow-y-auto">
            <router-view />
          </main>
        </div>
      </div>
    </template>
    
    <!-- 未认证状态只显示路由视图（登录页） -->
    <template v-else>
      <router-view />
    </template>
  </div>
</template>

<script setup>
import { computed, watch } from 'vue';
import { useRoute } from 'vue-router';
import { useAuthStore } from '@/stores/auth';
import Sidebar from '@/components/layout/Sidebar.vue';
import Header from '@/components/layout/Header.vue';

const route = useRoute();
const authStore = useAuthStore();
const isAuthenticated = computed(() => authStore.isAuthenticated);

// 为调试添加路由和认证状态监听
watch(() => route.path, (newPath) => {
  console.log('路由变化:', {
    新路径: newPath,
    认证状态: isAuthenticated.value
  });
});
</script>